import React, { Component } from 'react';
import { connect } from 'dva';
import _ from 'lodash';
import styles from './index.css';
import { ConnectState, Device, Statistics } from '@/models/connect';
import router from 'umi/router';
import { isMenuVisible } from '@/utils/utils';

// import { CollectionParamsType } from '@/services/device';

interface DeviceManagerProps {
  deviceList?: Device[];
  statistics?: Statistics;
  loading?: boolean;
}

interface DeviceItemProps {
  item: Device;
  handleTo: (deviceTypeNo: number) => void;
}

const DeviceItem: React.FC<DeviceItemProps> = ({ item, handleTo }) => (
  <div
    className={styles.litem}
    onClick={() => {
      isMenuVisible('iot:device:list') && handleTo(item.deviceTypeNo);
    }}
  >
    <h4 className={styles.h}>{item.deviceTypeName}</h4>
    <p className={styles.total}>
      数量 <span className={styles.sp1}>{item.deviceCount}</span>
    </p>
    <p className={styles.ltext}>
      <span className={styles.sp2}>
        完好率 : <span style={{ color: '#85ee9e' }}>{item.serialNumber}</span>
      </span>
      <span className={styles.sp3}>
        今日报警 : <span style={{ color: '#d5695e' }}>{item.deviceAlamToDay}</span>
      </span>
    </p>
  </div>
);

// const DeviceItem2 = connect()(DeviceItem);

@connect(({ loading, device }: ConnectState) => ({
  loading: loading.effects['device/initDeviceManger'],
  deviceList: device.deviceList,
  statistics: device.statistics,
}))
class DeviceManager extends Component<DeviceManagerProps> {
  handleTo: (deviceTypeNo: number) => void = deviceTypeNo => {
    // debugger;
    const { dispatch } = this.props;
    dispatch({ type: 'device/changeDeviceCollectionList', payload: deviceTypeNo });
    dispatch({
      type: 'device/filterDeviceCollection',
      payload: { deviceTypeParentNo: deviceTypeNo, pageSize: 12 },
    }).then(() => {
      dispatch({ type: 'device/setActiveTab', payload: '1' });
    });
  };
  componentDidMount() {}
  render() {
    const { statistics = {}, deviceList = [] } = this.props;
    return (
      <div className={styles.container}>
        {isMenuVisible('iot:device:selectAll') && (
          <>
            <div className={styles.statistics}>
              <div className={styles.sitem}>
                <div className={styles.simg}>
                  <span>{statistics.deviceCount}</span>
                </div>
                <div className={styles.stext}>
                  <span>设备总数</span>
                </div>
              </div>
              <div className={styles.sitem}>
                <div className={styles.simg}>
                  <span>{statistics.intactRate}</span>
                </div>
                <div className={styles.stext}>
                  <span>完好率</span>
                </div>
              </div>
              <div className={styles.sitem}>
                <div className={styles.simg}>
                  <span>{statistics.deviceAlamCount}</span>
                </div>
                <div className={styles.stext}>
                  <span>今日报警</span>
                </div>
              </div>
            </div>
            <div className={styles.list}>
              {_.map(deviceList, (item, index) => (
                <DeviceItem key={index} item={item} handleTo={this.handleTo} />
              ))}
            </div>
          </>
        )}
      </div>
    );
  }
}

export default DeviceManager;
